<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        margin: 0 auto;
        width: 400px;
        height: 350px;
        position: relative;
      }
      .div1 {
        width: 500px;
        height: 100px;
        background-color: red;
        text-align: center;
        line-height: 100px;
      }
      .div2 {
        width: 500px;
        height: 200px;
        background-color: blue;
        position: absolute;
        bottom: 0;
        text-align: center;
        text-wrap: wrap;
        display: none;
      }
      button {
        width: 100px;
        height: 50px;
        background-color: yellow;
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="div1">随机题目</div>
      <button class="btn">点击</button>
      <div class="div2"></div>
    </div>
  </body>
</html>
<script>
  var oDiv1 = document.querySelector(".div1");
  var oDiv2 = document.querySelector(".div2");
  var oBtn = document.querySelector(".btn");
  var arr = [
    `将json字符串 '{"name":"zs"}'转为json对象的语法?`,
    "this指向有哪些?改变this指向的方法有哪些?",
    "let和var的区别?let和const的区别?",
    "简述for..in循环和for..of循环的区别?",
    "简述字符串中和正则 相关的api,并简述含义和返回值?",
    "写一个正则，用于匹配任意一个或者多个数字?",
    "什么是事件对象，写出鼠标事件对象的属性有哪些？区别是什么？",
    "写出键盘事件对象的属性有哪些？",
    "什么是事件委托，事件委托的好处是什么?",
    "写出鼠标事件类型，键盘事件类型，表单事件类型？",
    "事件绑定的方式有哪些？区别是什么?",
    "DOM操作样式时,获取样式的语法有哪些,含义是？",
    "DOM操作属性时,操作属性的语法有哪些?",
    "DOM的创建元素节点,尾部追加,插入,克隆,替换,的语法?",
    "写出数组中能改变原数组的api有哪些?",
    "什么样的函数可以改造成箭头函数,怎么改?",
    "基本数据类型和引用数据类型的区别?",
  ];
  var arr1 = [
    "var str = JSON.stringify(json);JSON.parse(str);",
    "1. 事件中的this:始终指向的是绑定事件的事件源 2. 函数中的this:谁调用这个函数函数就指向谁 3. 对象中方法中的this:指向的是对象本身 4. 定时器中的this指向的是:window 5. 全局函数中的this指向的是:window   函数名.call(指向谁就写谁,实参1,实参2....) 函数名.apply(指向谁就写谁,[实参1,实参2....])",
    "1.在同一个作用域中，声明两个一样的变量名： let不可以,var可以 2. 预解析:var可以  let不可以 3. 块级作用域:var不可以  let可以 4. 暂时性死区  let可以先声明后赋值,const必须声明的同时赋值  2.let声明的变量可以被重新赋值,const声明的常量不可以被重新赋值",
    "1.for..in循环和for..of循环 都可以遍历数组： for.in遍历的是下标  for.of遍历的是值  2. for..in循环和for..of循环: for.in遍历的对象  for.of不可以遍历对象  3. for..in循环和for..of循环: for..in不可以遍历set集合,for..of可以遍历set集合,变量的是元素  4.for..in循环和for..of循环: for..in不可以遍历map集合,for..of可以遍历map集合,变量的是元素",
    "1.字符串中与正则相关的api:match()  search()  replace()  split()  2.含义和返回值:match()  返回值是匹配到的字符串  search()  返回值是匹配到的字符串的索引  replace()  返回值是替换后的字符串  split()  返回值是分割后的数组",
    "/^\d+$/",
    "e.clientX  e.pageX  e.offsetX",
    "e.keyCode  e.ctrlKey",
    "事件委托:给父级元素绑定事件,当子元素触发事件时,父级元素也可以触发事件 事件委托的好处:1.减少事件绑定的次数,提高性能 2.动态创建的元素也可以触发事件",
    "1.鼠标事件类型:click  mouseover  mouseout  mousedown  mouseup  mousemove  2.键盘事件类型:keydown  keyup  keypress  3.表单事件类型:submit  reset  change  focus  blur  input",
    "1.事件绑定方式:1.直接绑定 2.动态绑定 3.事件监听绑定  2.区别:1.直接绑定:只能绑定一个事件 2.动态绑定:只能绑定一个事件 3.事件监听绑定:可以绑定多个事件",
    "ele.style.属性 不推荐  window.getComputedStyle(元素).属性  window.getComputedStyle(元素)['属性']  ele.offsetWidth:获取元素的实际宽  width+border+padding  ele.clientWidth:获取元素的可视宽  border+padding  ele.offsetLeft:获取元素距离它具有定位的父元素的左偏移量,如果父元素无定位,相对于 浏览器窗口  ele.offsetTop:获取元素距离它具有定位的父元素的上偏移量,如果父元素无定位,相对于 浏览器窗口",
    "ele.固有属性  ele.id   ele.id =1  ele.src   ele.src =''  ele.checked   ele.checked = true/false  ele.disabled ele.disabled = =true、false  ele.href   自定义属性  ele.setAttribute('属性名','属性值')  ele.getAttribute('属性名')  ele.removeAttribute('属性名')  ele.dataset.id = '1'  ele.dataset.id",
    "document.createElement('元素名')  父元素.appendChild(子元素)  父元素.insertBefore(子元素,插入的元素)  父元素.replaceChild(新元素,旧元素)  父元素.removeChild(子元素)  父元素.cloneNode(true/false)",
    "能改变原数组的api: push()  pop()  shift()  unshift()  splice()  sort()  reverse()  fill()  copyWithin()  ",
    "一般可以将匿名函数改造成箭头函数",
    "基本数据类型的变量的值：栈内存  引用数据类型的值：堆内存  基本数据类型的变量存储的值  引用数据类型的变量存储的地址值  基本数据类型的值和基本数据类型的值 不会影响  引用数据类型的值和引用数据类型的值在地址值一样的情况下会相互影响",
  ];
  var timer = null;
  var flag = true;
  oBtn.onclick = function () {
    if (flag) {
      timer = setInterval(function () {
        var num = Math.floor(Math.random() * arr.length);
        oDiv1.innerHTML = arr[num];
      });
    }
    if (!flag) {
      clearInterval(timer);
    }
    flag = !flag;
  };
  oDiv1.onclick = function () {
    if (flag) {
      oDiv2.style.display = "block";
      oDiv2.innerHTML = arr1[arr.indexOf(oDiv1.innerHTML)];
    }
  };
</script>
